<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <title>门店信息查询</title>
    <link rel="stylesheet" href="css/vant.css">
    <link rel="stylesheet" href="css/changeShop.css">

    <style>
        .emptyBox {
            margin: 40px 0;
            width: 100%;
            text-align: center;
            font-size: 14px;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="inputBox" style="margin-bottom: 20px;">
            <div>
                <span>门店名称：</span>
                <input type="text" v-model="shopName" placeholder="请输入要查询的门店名称">
            </div>
        </div>
        <template v-if="list.length!=0">
            <div class="inputBox" v-for="(item,index) in list" :key="index" style="border-bottom: 2px solid #f2f2f2;">
                <div style="font-weight: bold;">结果{{index+1}}:</div>
                <div>
                    <span>账号</span>
                    <input type="text" v-model="item.shop_account" readonly>
                </div>
                <div>
                    <span>门店ID</span>
                    <span>{{item.shop_id}}</span>
                </div>
                <div>
                    <span>门店</span>
                    <span>{{item.shop_name}}</span>
                </div>
                <div>
                    <span>门店UUID:</span>
                    <span style="display: flex;
                    flex-direction: column;
                align-items: flex-end;">
                        {{item.shop_note}}
                        <span @click="fuzhi(item.shop_note)" style="color:#409EFF;">复制</span>
                    </span>
                </div>
            </div>
        </template>
        <div class="emptyBox" v-if="shopName!=''&&list.length==0">暂未查询到相关记录</div>


        <div class="btnBox" @click="submitHandle">
            <div>搜索</div>
        </div>
        <div class="loading" v-if="isShow">
            <img src="./img/load.gif" alt="">
        </div>

    </div>
    <script src="js/vue.min.js"></script>
    <script src="js/flex_ible/lib-flexible.js"></script>
    <script src="js/vant.min.js"></script>
    <script src="js/url.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/ajax.js"></script>
    <script>


        var vm = new Vue({
            el: "#app",
            data: {
                isShow: false,
                shopName: '',
                UUID: "",
                list: []

            },
            created() {

            },
            methods: {
                submitHandle() {
                    if (this.shopName == '') {
                        vant.Toast('请输入要查询的店铺');
                        return
                    }

                    console.log(this.shopName);

                    var that = this;
                    that.isShow = true
                    ajax({
                        type: "post",
                        url: newUrl + "backLogin/listShopUUid",
                        data: {
                            shopName: that.shopName
                        },
                        dataType: 'json',
                        timeout: 10000,
                        contentType: "application/json",
                        success: function (res) {
                            var res = JSON.parse(res)
                            console.log(res);
                            if (res.flag) {
                                that.list = res.data.reverse()
                                vant.Toast('查询成功');
                            } else {
                                vant.Toast('查询失败');
                            }
                            that.isShow = false
                        },
                    })
                },
                fuzhi: function (text) {
                    var oInput = document.createElement('input');
                    oInput.value = text;
                    document.body.appendChild(oInput);
                    oInput.select(); // 选择对象;
                    document.execCommand("Copy"); // 执行浏览器复制命令
                    this.$toast("复制成功");
                    oInput.remove();
                },
            }
        })
    </script>

</body>

</html>